import { Input, Form, Checkbox, Button } from 'antd';
import type { FormProps } from 'antd';
import "./login.css"
import user from "../../../public/user.png"
import { useNavigate } from 'react-router';
import { MANAGE_INDEX_PATHNAME } from '../../routers';
import { useDispatch } from 'react-redux';
import { LoginServer } from '../../server/userServer';
import { useRequest } from 'ahooks';
import { setInfoUser, userType } from '../../store/user';
import { setToken, setUserInfo } from '../../utils/user-token';

type FieldType = {
    username: string;
    password: string;
    RemEmb?: string;
};

function Login() {
    const [form] = Form.useForm()
    const push = useNavigate()
    const dispatch = useDispatch()


    const onFinish: FormProps<FieldType>['onFinish'] = (values: FieldType) => {
        const { username, password } = values
        run(username, password)
    };
    const { run } = useRequest(LoginServer, {
        manual: true,
        onSuccess(result) {
            const { data }: { data: userType } = result;
            dispatch(setInfoUser(data)) // 存储到 redux store
            setTimeout(() => {
                setUserInfo(data.nickname)
                setToken(data.token)
                push(MANAGE_INDEX_PATHNAME)
            }, 2000)

        },
        onFinally() {

        },
    })
    return (
        <div className='login '>
            <div className="flex  justify-center items-center mb-8">
                <img src={user} className='ml-20 mr-2' />
                <div className='text-5.5'>用户登录</div>
            </div>

            <Form
                form={form}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ RemEmb: false }}
                onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<FieldType>
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item<FieldType> name="RemEmb" valuePropName="checked" label={null}>
                    <Checkbox>记住我</Checkbox>
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                    <span className='pl-2 c-primary ' style={{ cursor: 'pointer' }}
                        onClick={() => {
                            push('/register')
                        }}
                    >注册新用户</span>
                </Form.Item>
            </Form>

        </div>

    )
}

export default Login
